<template>
    <div>
        登录页面

        <div style="width:600px;margin:0 auto;">
            <div>用户名：<el-input v-model="loginForm.username" /></div>
            <div>密码：<el-input v-model="loginForm.password" type="password" /></div>
            <div><el-button @click="eventLogin">登录</el-button></div>
            <div><el-checkbox v-model="remeberPassword">记住密码</el-checkbox></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            remeberPassword: true
        }
    },
    mounted() {
        //记住密码：如果勾选了，则返填用户名和密码
        let un = localStorage.getItem('ph4_login_username')
        let pw = localStorage.getItem('ph4_login_password')
        if (un != null && pw != null) {
            this.loginForm.username = un
            this.loginForm.password = pw
        }
    },
    methods: {
        //登录按钮事件
        eventLogin() {
            let url = this.$baseUrl + '/system/user'
            let data = {
                "name": this.loginForm.username,
                "password": this.loginForm.password
            }
            this.$http.post(url, data).then(res => {
                this.$message.info(res.data.message)
                if (res.data.code == 200) {
                    //登录成功，做你想做的事情，如保存用户信息，跳转页面
                    //勾选记住密码
                    if (this.remeberPassword) {
                        localStorage.setItem('ph4_login_username', this.loginForm.username)
                        localStorage.setItem('ph4_login_password', this.loginForm.password)
                    }

                    let d = res.data.data
                    //d是json对象，而setItem的value是字符串，所以需要进行转换
                    localStorage.setItem('ph4_login_info', JSON.stringify(d))
                    this.$router.push('/default')
                }
            })
        }
    }
}
</script>